<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <title>Person Resume</title>
</head>

<body>
    <nav class="navbar navbar-default">
        <div class="container">
            <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#leadBar" aria-expanded="false" aria-controls="navbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
            <div class="collapse navbar-collapse" id="leadBar">
                <ul class="navbar nav navbar-nav">
                    <li><a href="index.html" ><span class="glyphicon glyphicon-home" aria-hidden="true"></span>首页</a></li>
                    <li><a href="#info">基本信息</a></li>
                    <li><a href="">职业技能</a></li>
                    <li><a href="">项目展示</a></li>
                    <li><a href="">请联系我</a></li>
                </ul>
            </div>

        </div>
    </nav>
    <div class="page-header">
        <h1>个人简历</h1>
    </div>
    <div class="divContent container">
        <div class="row">
            <h2 class="lead">基本信息</h2>
            <div class="col-sm-3">
                <blockquote>
                    <h2>某某</h2>
                    <footer>XX工程师</footer>
                </blockquote>
                <div class="row text-center">
                    <img src="./img/zmz.jpg" alt="boy" width="150px" class="img-responsive img-circle img-thumbnail">
                </div>
                <div class="row text-center">
                    <h3>个人介绍</h3>
                </div>
                <div class="row">
                    <span>滴滴答答滴滴答答滴滴答答滴滴答
                        答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答</span>
                </div>
                <div class="table-responsive">
                    <table class="table table-bordered table-striped table-hover table-condensed">
                        <tr>
                            <td>姓名</td>
                            <td>YYY</td>
                            <td>年龄</td>
                            <td>18</td>
                        </tr>
                        <tr>
                            <td>学校</td>
                            <td>XX大学</td>
                            <td>学历</td>
                            <td>本科</td>
                        </tr>
                        <tr>
                            <td>专业</td>
                            <td>软件工程</td>
                            <td>学制</td>
                            <td>全日制</td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="col-sm-9">
                <!-- 大屏幕 -->
                <div class="jumbotron">
                    <h2>个人荣誉</h2>
                    <hr>
                    <p2>获得******************************************</p2>
                    <h2>我的空间</h2>
                    <hr>
                    <div class="row">
                        <div class="col-sm-3">
                            <a href=""><button class="btn-primary">个人博客</button></a>
                        </div>
                        <div class="col-sm-3">
                            <a href=""><button class="btn-primary">个人博客园</button></a>
                        </div>
                        <div class="col-sm-3">
                            <a href=""><button class="btn-primary">我的github</button></a>
                        </div>
                    </div>
                    <h2>个人技能</h2>
                    <hr>
                    <p>1.***************</p>
                    <p>2.***************</p>
                    <p>3.***************</p>
                    <p>4.***************</p>
                    <p>5.***************</p>
                </div>
            </div>
        </div>
        <div class="row">
            <h2 id="skill" class="lead">职业技能</h2>

            <p>
                <span class="label label-success">JavaScript</span>
                <span class="label label-success">Vue.js</span>
                <!-- <span class="label label-success">ssh</span> -->
            </p>
            <div class="progress">
                <div class="progress-bar progress-bar-success progress-bar-striped active" style="width: 80%;">
                    <span>熟悉</span>
                </div>
            </div>

            <p>
                <span class="label label-success">Node.js</span>
                <span class="label label-success">PHP</span>
                <!-- <span class="label label-success">ssh</span> -->
            </p>
            <div class="progress">
                <div class="progress-bar progress-bar-danger progress-bar-striped active" style="width: 75%;">
                    <span>熟悉</span>
                </div>
            </div>
            <p>
                <span class="label label-info">html/css</span>
            </p>
            <div class="progress">
                <div class="progress-bar progress-bar-info progress-bar-striped active" style="width: 70%;">
                    <span>熟悉</span>
                </div>
            </div>

            <p>
                <span class="label label-warning">数据结构/算法</span>
            </p>
            <div class="progress">
                <div class="progress-bar progress-bar-warning progress-bar-striped active" style="width: 79%;">
                    <span>熟悉</span>
                </div>
            </div>
        </div>
        <div class="row">
            <h2 class="lead">项目展示</h2>
            <div class="col-sm-7">
                <div id="" class="myCarousel carousel slide">
                    <ol class="carousel-indicators">
                        <li data-target=".myCarousel" data-slide-to="0" class="active"></li>
                        <li data-target=".myCarousel" data-slide-to="1"></li>
                        <li data-target=".myCarousel" data-slide-to="2"></li>
                        <li data-target=".myCarousel" data-slide-to="3"></li>
                    </ol>
                    <div class="carousel-inner">
                        <div class="item active">
                            <img src="./img/img1.jpg" style="height: 406px;width: 650px" alt="第一张" class="img-responsive">
                            <div class="carousel-caption">项目 1</div>
                        </div>
                        <div class="item">
                            <img src="./img/img2.jpg" style="height: 406px;width: 650px" alt="第二张" class="img-responsive">
                            <div class="carousel-caption">项目 2</div>
                        </div>
                        <div class="item">
                            <img src="./img/img3.jpg" style="height: 406px;width: 650px" alt="第三张" class="img-responsive">
                            <div class="carousel-caption">项目 3</div>
                        </div>
                        <div class="item">
                            <img src="./img/img4.jpg" style="height: 406px;width: 650px" alt="第四张" class="img-responsive">
                            <div class="carousel-caption">项目 4</div>
                        </div>
                        <!--左右翻页-->
                        <a href=".myCarousel" data-slide="prev" class="carousel-control left">
                            <span class="glyphicon glyphicon-chevron-left"/>
                        </a>
                        <a href=".myCarousel" data-slide="next" class="carousel-control right">
                            <span class="glyphicon glyphicon-chevron-right"/>
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-sm-5">
                <div id="" class="myCarousel carousel slide">
                    <ol class="carousel-indicators">
                        <li data-target=".myCarousel" data-slide-to="0" class="active"></li>
                        <li data-target=".myCarousel" data-slide-to="1"></li>
                        <li data-target=".myCarousel" data-slide-to="2"></li>
                        <li data-target=".myCarousel" data-slide-to="3"></li>
                    </ol>
                    <div class="carousel-inner">
                        <div class="item active">
                            <p>项目说明</p>
                            <p>项目说明</p>
                            <p>项目说明</p>
                            <p>项目说明</p>
                            <p>项目说明</p>
                            <div class="carousel-caption">项目 1</div>
                        </div>
                        <div class="item">
                            <p>项目说明</p>
                            <p>项目说明</p>
                            <p>项目说明</p>
                            <p>项目说明</p>
                            <div class="carousel-caption">项目 2</div>
                        </div>
                        <div class="item">
                            <p>项目说明</p>
                            <div class="carousel-caption">项目 3</div>
                        </div>
                        <div class="item">
                            <p>项目说明</p>
                            <div class="carousel-caption">项目 4</div>
                        </div>
                        <!--左右翻页-->
                        <a href=".myCarousel" data-slide="prev" class="carousel-control left">
                    <span class="glyphicon glyphicon-chevron-left"/>
                </a>
                        <a href=".myCarousel" data-slide="next" class="carousel-control right">
                    <span class="glyphicon glyphicon-chevron-right"/>
                </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <h2 class="lead">请联系我</h2>
            <div class="panel panel-default">
                <div class="panel-heading">如果你感兴趣</div>
                <div class="panel-body">
                    <form action="" method="post">
                        <label class="control-label" for="email">Email</label>
                        <input type="email" class="form-control" id="email" />
                        <br/>
                        <div class="btn-group pull-right">
                            <button type="submit" class="btn btn-success">请联系我</button>
                            <button type="reset" class="btn btn-danger">重置</button>
                        </div>
                        <div class="clearfix"></div>
                    </form>

                </div>
            </div>
        </div>
    </div>


</body>

</html>
